//################################
// 版权所有：中国农业银行软件开发中心
// 系统名称：移动办公应用-手机版
// 文件名称：modal/index.js
// 创建时间：2016年08月16日
// 创建人员：Panda
// 功能说明：modal公共组件
//################################

'use strict';

import React, {Component} from 'react';
import {
    View,
    Text,
    Animated,
    TouchableWithoutFeedback,
    Dimensions,
    Easing,
    StyleSheet,
} from 'react-native';

import {
	CommonData,
	PubSubTopics,
} from '../../common';

import PubSub from 'pubsub-js';

const screen = Dimensions.get('window');

class Modal extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isOpen: false,
            backgroundOpacity: new Animated.Value(0),
        };
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.isOpen != this.state.isOpen) {
			if (nextProps.isOpen) {
				this.open();
			}
			else {
				this.close();
			}
		}
    }

    componentDidMount() {
		this.state = {
			backgroundOpacity: new Animated.Value(0),
		};

		if (this.props.isOpen) {
			this.open();
		}
		else {
			this.close();
		}

		this.onAllModalCloseEvent = PubSub.subscribe(PubSubTopics.ALL_MODAL_CLOSE, () => {this.onAllModalCloseHandler()});
	}

	componentWillUnmount() {
		PubSub.unsubscribe(this.onAllModalCloseEvent);
	}
	
	onAllModalCloseHandler() {
		if (this.props.cannotBeClosedOnBack) {
			//do nothing
		}
		else {
			this.close();

			this.props.modalClosedOnBackCallback && this.props.modalClosedOnBackCallback();
		}
	}

    renderBackdrop() {
		var backdrop = (
			<TouchableWithoutFeedback onPress={this.props.backdropPressToClose ? this.close.bind(this) : null}>
				<Animated.View style={[styles.absolute, {opacity: 0}]}>
					<View style={[styles.absolute, {backgroundColor: this.props.isBackdropColorTransparent ? 'transparent' : 'black'}]} />
				</Animated.View>
			</TouchableWithoutFeedback>
		);

		return backdrop;
	}

    open() {
		CommonData.isAnyModalOpen = true;

		this.setState({
			isOpen: true,
		});

		var animation = Animated.timing(
			this.state.backgroundOpacity,
			{
				toValue: 1,
				duration: 300,
				easing: Easing.elastic(0.8),
			}
		);
		animation.start();

		this.props.isShown && this.props.isShown(true);
	}

    close() {
		var animation = Animated.timing(
			this.state.backgroundOpacity,
			{
				toValue: 0,
				duration: 300,
				easing: Easing.elastic(0.8),
			}
		);
		animation.start(() => {
			this.setState({
				isOpen: false,
			});
		});

		this.props.backdropClose && this.props.backdropClose(false);

		CommonData.isAnyModalOpen = false;
	}
    
    render() {
        var backdrop = this.renderBackdrop();

		if (!this.state.isOpen) {
			return (<View />);
		}

		return (
			<Animated.View style={[styles.transparent, styles.absolute, { alignItems: 'center', justifyContent: 'center', backgroundColor: this.props.isBackdropColorTransparent ? 'transparent' : '#00000055', opacity: this.state.backgroundOpacity,}]}>
				{backdrop}
				<View style={[{alignSelf: 'center', alignItems: 'center', justifyContent: 'center'}, this.props.style,]}>
					{this.props.children}
				</View>
			</Animated.View>
		);
    }
}

var styles = StyleSheet.create({
	wrapper: {
		backgroundColor: 'white',
	},
	transparent: {
		backgroundColor: 'transparent',
	},
	absolute: {
		position: "absolute",
		top: 0,
		bottom: 0,
		left: 0,
		right: 0,
	},
	center: {

	}
});

export default Modal;